import type { mapMarderViewPropsType } from './typings'
import { defineComponent } from 'vue'
import { ElDialog, ElButton } from 'element-plus'
import MapView from './map'

export default defineComponent({
  props: ['visible', 'markers', 'id'],
  emits: ['cancel'],
  setup(props: mapMarderViewPropsType, { emit }) {
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }

    return () => {
      const { visible, id, markers } = props
      return (
        <ElDialog
          width="800px"
          title={'查看'}
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <div style="height: 500px;">
            {markers.length > 0 && <MapView id={id} isMarkers setFitView markers={markers} />}
          </div>
        </ElDialog>
      )
    }
  }
})
